<!DOCTYPE html>
<html ng-app="he">
<head lang="en" >
    <meta charset="UTF-8">
    <title> HOME | TMS </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
		is_local='{{local}}';
		function loadjs(script_filename) {
	        document.write('\<script language="javascript" type="text/javascript" src="' + script_filename + '"\>\</script\>');}
	    if(!is_local){
		    static_url='/static';
	    }else{
		    static_url='../../../../static';
		}
	</script>
<script type="text/javascript">
	//加载所有的依赖库(JS 和CSS)
    loadjs(static_url+'/js/hr/hr_js_css.js')
</script>
	
<script type="text/javascript">
	app.config(function ($stateProvider) {
		$stateProvider.state('index',{
			url:'/:page',
			templateUrl: function (rd){
				if(rd.page)return './' + rd.page;
				  },
			
		})
	})
    
</script>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content page-sidebar-closed-hide-logo" >
<!-- 顶部横条开始 -->
<div class="page-header -i navbar navbar-fixed-top">
    <!-- 顶部内容开始 -->
    <div class="page-header-inner">
        <!-- logo -->
        <div class="page-logo">
            <a href="index.html">
                <span class="logo-default">TMS</span>
            </a>
            <!--快捷隐藏侧边栏-->
            <div class="menu-toggler sidebar-toggler"> </div>
        </div>
        <!-- logo 结束 -->
        <!-- 顶部搜索框开始 -->
        <!--<form class="search-form" action="index.html" method="GET">-->
            <!--<div class="input-group">-->
                <!--<input type="text" class="form-control" placeholder="Search..." name="query">-->
				<!--<span class="input-group-btn">-->
				<!--<a href="javascript:;" class="btn submit"><i class="icon-magnifier"></i></a>-->
				<!--</span>-->
            <!--</div>-->
        <!--</form>-->
        <!-- 顶部搜索框结束 -->
        <!-- 响应式菜单切换开始 屏幕缩小时-->
        <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse"></a>
        <!-- 响应式菜单切换结束 -->
        <!-- 顶部导航菜单开始 -->
        <div class="top-menu">
            <ul class="nav navbar-nav pull-right">
                <!-- 通知下拉开始 -->
                <li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <i class="icon-bell"></i>
					    <span class="badge badge-default"> 3 </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="external">
                            <h3><span class="bold">12 pending</span> notifications</h3>
                            <a href="index.html">view all</a>
                        </li>
                        <li>
                            <ul class="dropdown-menu-list scroller" style="height: 220px;" data-handle-color="#637283">
                                <li>
                                    <a href="javascript:;">
                                        <span class="time">just now</span>
									<span class="details">
									<span class="label label-sm label-icon label-success">
									</span>Leakage clock application. </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <span class="time">3 mins</span>
									<span class="details">
									<span class="label label-sm label-icon label-danger">
									</span>Leakage clock application. </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <span class="time">3 days</span>
									<span class="details">
									<span class="label label-sm label-icon label-danger">
									</span>Leakage clock application. </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!-- 通知下拉结束 -->
                <!-- 用户登录下拉开始 -->
                <li class="dropdown dropdown-user">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <small>Welcome ,</small>
					    <span class="username username-hide-on-mobile"> laiqin </span>
                    </a>
                </li>
                <li class="dropdown logOut">
                    <a href="javascript:;" class="dropdown-toggle">
                        <i class="icon-power"></i>
                        <span>log out</span>
                    </a>
                </li>
                <!-- 用户登录下拉结束 -->
            </ul>
        </div>
        <!-- 顶部导航菜单结束 -->
    </div>
    <!-- 顶部内容结束 -->
</div>
<!-- 顶部横条结束 -->
<!--清除浮动-->
<div class="clearfix">
</div>
<!-- 页面内容开始 -->
<div class="page-container">
    <!-- 侧边栏开始 -->
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse">
            <!-- 侧边菜单开始 -->
            <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="margin-top:25px;">
                <li class="start active open">
                    <a href="javascript:;">
                        <i class="icon-speedometer"></i>
                        <span class="title">Dashboard</span>
                        <span class="selected"></span>
                        <span class="arrow open"></span>
                    </a>
                    
                    <ul class="sub-menu">
                        <li class="active">
                            <a href="index.html">
                                <i class="icon-home"></i>
                                Home</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-grid"></i>
                        <span class="title">Attendance</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
	                    <!-- onclick="loadpage('att_recording.html')" -->
                        <li >
                            <a href="#/att_recording.html">Recording</a>
                        </li>
                    
                        <li >
                            <a href="#/att_report.html">Reports</a>
                        </li>
                        <li >
                            <a href="#/application.html">Application</a>
                        </li>
                         <li>
                            <a href="#/expire_manage.html">Expire Management</a>
                        </li>
                        <li >
                            <a href="#/set_work_time.html">Set work time</a>
                        </li>
                    </ul>
                </li>
                <!--<li>
                    <a href="javascript:;">
                        <i class="icon-plane"></i>
                        <span class="title">Leave</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#/leave_application_record_hr.html">Application record</a>
                        </li>
                       
                        <!--<li>
                            <a href="#/swapoff_management.html">Swapoff Management</a>
                        </li>
                    </ul>
                </li>-->
                <li>
                    <a href="javascript:;">
                        <i class="icon-social-dropbox"></i>
                        <span class="title">Personnel records</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Employee Info</a>
                        </li>
                        <li>
                            <a href="#">New Entry</a>
                        </li>
                    </ul>
                </li>
                <li class="last">
                    <a href="javascript:;">
                        <i class="icon-settings"></i>
                        <span class="title">Last</span>
                        <span class="arrow "></span>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">
                                <span class="badge badge-roundless badge-danger">new</span>111</a>
                        </li>
                        <li>
                            <a href="#">222</a>
                        </li>
                        <li>
                            <a href="#">333</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- 侧边菜单结束 -->
        </div>
    </div>
    <!-- 侧边栏结束 -->
    <!-- 内容开始 -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <!-- 面包屑导航开始-->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-map-marker"></i>
                        <a href="#" id="pageHeader">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#" id="breadcrumbs">Home</a>
                    </li>
                </ul>
            </div>
            <!-- 面包屑导航结束 -->
            <!-- 页面内容开始 -->
            <div class="row">
                <div class="col-md-12" id="pageContent" ui-view>
                    首页内容
                </div>
            </div>
            <!-- 页面内容结束 -->
        </div>
    </div>
    <!-- 内容结束 -->
</div>
<!-- 容器结束 -->
<!-- 脚部开始 -->
<div class="page-footer">
    <div class="page-footer-inner">
        Copyright &copy; 2016, Moki Tech Ltd.
    </div>
    <div class="scroll-to-top">
        <i class="icon-arrow-up"></i>
    </div>
</div>


<script>
    jQuery(document).ready(function() {
        Metronic.init();
        Layout.init();
        Demo.init();
    });
</script>



<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#someid').on('click', function () {
            $('#OverviewcollapseButton').removeClass("collapse").addClass("expand");
            $('#PaymentOverview').hide();
        });
    });

    $(function(){
         // 菜单栏选中样式时的判断，移除多余元素
        $(".sub-menu li").click(function(){
            var that = this;
            $(that).addClass("active").siblings().removeClass("active").parent().parent().siblings().children().find("li").removeClass("active");
            $(that).parent().parent().addClass("active open").siblings().removeClass("active open");
            if( $(that).parent().parent().children().find("span").hasClass("selected")){
                $(that).parent().parent().children().find("span").remove(".selected");
            }
            $(that).parent().siblings().append("<span class='selected'></span>");

            $(that).parent().parent().siblings().children().find("a").children().find("span").remove(".selected");

            //面包屑导航内容变更
            var text1=$(that).parent().siblings().find(".title").text();
            var text2=$(that).children().text();
            $("#pageHeader").text(text1);
            $("#breadcrumbs").text(text2);
        });
    });

</script>

</body>
</html>